<template>
  <div>
    <h3
      v-if="imgUrl"
      style="
        padding: 0px 15px;
        text-align: center;
        margin: 0;
        margin-top: 20px;
        margin-bottom: 20px;
      "
    >
      请长按图片保存
    </h3>
    <h3
      v-else
      style="padding: 0px 15px; text-align: center; margin: 0; margin-top: 20px"
    >
      图片正在制作中，请稍后....
    </h3>
    <div style="margin-top: 20px">
      <div class="result" v-if="Object.keys(data).length > 0" id="mycanvas2">
        <div class="title">为您提供以下爱脑健康建议</div>
        <div class="line"></div>
        <div class="content">
          <div class="text_content">
            <div class="">
              <div class="first">
                <div class="left">
                  <img
                    :src="tou"
                    alt=""
                    style="width: 44px; height: 44px; border-radius: 50%"
                  />
                </div>
                <div class="right">
                  <div class="right_first_line">
                    <!-- 名称 -->
                    <div class="name">
                      {{ data.name }}
                    </div>
                    <!-- 教育 -->
                    <div class="education">
                      <!-- 教育年限：{{ data.eduTotal }}年 -->
                    </div>
                  </div>
                  <!--  -->
                  <div class="right_two_line">
                    <div class="education">
                      {{ data.gender }} {{ data.age }}
                    </div>
                    <div class="education">
                      {{ data.reportDate }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="test_number">
                <div class="education">编号：{{ data.reportNo }}</div>
                <div class="education">
                  <!-- 主试人：{{ data.doctorName }} -->
                </div>
              </div>
            </div>

            <div
              style="
                width: 100%;
                height: 0;
                border-bottom: 1px dashed #c8e7e6;
                padding-top: 10px;
              "
            ></div>
            <div style="padding-bottom: 10px"></div>

            <div class="header_title">
              <img src="./img2/first.png" alt="" style="" />
              <span style="" class="text">医疗就诊建议</span>
            </div>
            <div class="zhushi">
              <div v-html="content"></div>
            </div>

            <div
              style="
                width: 100%;
                height: 0;
                border-bottom: 1px dashed #c8e7e6;
                padding-top: 10px;
              "
            ></div>
            <div style="padding-bottom: 10px"></div>
            <div class="header_title">
              <img src="./img2/secend.png" alt="" style="" />
              <span style="" class="text">专业训练建议</span>
            </div>
            <div class="zhushi">
              <div v-html="content2"></div>
            </div>

            <div
              style="
                width: 100%;
                height: 0;
                border-bottom: 1px dashed #c8e7e6;
                padding-top: 10px;
              "
            ></div>
            <div style="padding-bottom: 10px"></div>
            <div class="header_title">
              <img src="./img2/third.png" alt="" style="" />
              <span style="" class="text">运动康养建议</span>
            </div>
            <div class="zhushi">
              <div v-html="content3"></div>
            </div>

            <div
              style="
                width: 100%;
                height: 0;
                border-bottom: 1px dashed #c8e7e6;
                padding-top: 10px;
              "
            ></div>
            <div style="padding-bottom: 10px"></div>
            <div class="header_title">
              <img src="./img2/four.png" alt="" style="" />
              <span style="" class="text">睡眠调整建议</span>
            </div>
            <div class="zhushi">
              <div v-html="content4"></div>
            </div>

            <div
              style="
                width: 100%;
                height: 0;
                border-bottom: 1px dashed #c8e7e6;
                padding-top: 10px;
              "
            ></div>
            <div style="padding-bottom: 10px"></div>
            <div class="header_title">
              <img src="./img2/five.png" alt="" style="" />
              <span style="" class="text">营养膳食建议</span>
            </div>
            <div class="zhushi">
              <div v-html="content5"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="padding: 20px 20px">
      <img
        v-if="imgUrl"
        :src="imgUrl"
        alt=""
        style="width: 100%; height: 100%"
      />
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
export default {
  props: {
    token: {
      type: String,
      default: "",
    },
    avatar: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      imgUrl: "",
      data: {},
      content: `当出现认知障碍症状时，建议您及时前往“记忆门诊”专病科室、神经内科或老年病科室就医，完成详细脑健康检查，并进行针对性治疗。<br/><br/>
                 目前，认知障碍患者主要采取药物治疗和认知训练治疗，疾病发现越早，疗效越好。认知训练即通过医院终端机、手机移动端训练认知方面的典型题目，患者症状往往得以缓解，效果良好。<br/><br/>`,
      content2: `北京师范大学认知神经科学与学习国家重点实验室基于十余年的科研成果，利用认知康复训练技术，自主研发覆盖记忆力、注意力、感知觉、执行功能、加工速度、语言能力、逻辑推理等7大认知领域的认知训练体系。
<br/><br/>可基于您的认知障碍筛查报告，制定专属训练方案，有效加强主要脑功能的提升，促进大脑的健康运作。<span style="color: #0ace70">
您可定期前往合作医院进行处方化训练，也可通过手机进行碎片化和便捷性的训练。
</span><br/><br/>`,
      content3: `日常脑健康保养建议您多做康养运动，如专业的手指操、手指及全身有氧运动操等，可有效缓解神经紧张，改善大脑血液循环和神经功能。还可在日常生活中多进行一些散步、骑行、慢跑等有氧运动。<br/><br/>`,
      content4: `老年人<span style="color: #0ace70">睡眠质量差极易导致认知障碍</span>，甚至不同类型的痴呆。好的睡眠不仅能防止老年人过度疲劳，还能保护大脑皮质的细胞，使其免于衰竭或破坏，同时又是精神和体力得到恢复的最好方法。<br/><br/>`,
      content5: `良好的营养和平衡的膳食对于老年人来说非常重要，尤其是有一定认知障碍的老年人更加重要，合理的营养膳食应当适当限制热量摄入，营养物质要丰富，尤其是蛋白质要充足，蛋白质缺乏会增加脑卒中发生率，对脑功能危害极大。除此之外，还要保持
				<span style="color: #0ace70">
				摄入足量的维生素B12和维生素E
				</span>，可有效预防老年痴呆。<br/><br/>`,
    };
  },
  computed: {
    tou() {
      return this.avatar
        ? this.avatar
        : "https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/morenAv.png";
    },
  },
  methods: {
    handleGenerate() {
      const dom = document.querySelector("#mycanvas2");
      html2canvas(dom, {
        useCORS: true,
      }).then((canvas) => {
        this.imgUrl = canvas.toDataURL();
        // document.querySelector("#append").appendChild(canvas);
      });
    },
  },
  mounted() {
    console.log(123);
    console.log(this.token);
    this.$nextTick(() => {
      if (this.token) {
        fetch(
          `https://www.ainaoxingdong.com/api/an/wechat_app/wechat_user/report?token=${this.token}`
        ).then((response) => {
          response.json().then((res) => {
            console.log(res);
            const { data } = res;
            this.data = data.data;
            // this.data = {}
            console.log(data);
            this.$nextTick(() => {
              this.handleGenerate();
            });
          });
        });
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.zhushi_hui {
  width: 305px;
  height: 33px;
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #a1b0b3;
  line-height: 14px;
}

.header_title {
  margin: 15px 0;

  img {
    width: 16px;
    height: 16px;
    position: relative;
    top: 3px;
  }

  .text {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 550;
    color: #003941;
    line-height: 24px;
    margin-left: 5px;
  }
}

.zhushi {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #336c74;
  line-height: 17px;
}

.result {
  background: linear-gradient(180deg, #00cc6a 0%, #d8feeb 100%);
  width: 375px;
  position: fixed;
  left: -999999px;
  top: 9999999px;
  padding-bottom: 20px;

  .title {
    // width: 180px;
    height: 30px;
    font-size: 20px;
    font-family: FZLTDHJW--GB1-0, FZLTDHJW--GB1;
    font-weight: normal;
    color: #ffffff;
    line-height: 30px;
    padding-left: 35px;
    padding-top: 20px;
  }

  .line {
    width: 345px;
    height: 10px;
    background: #336c74;
    border-radius: 10px;
    margin: auto;
    margin-top: 10px;
    z-index: 1;
    position: relative;
    opacity: 0.5;
    bottom: -5px;
  }

  .content {
    width: 335px;
    background: #ffffff;
    box-shadow: 0px 6px 16px 0px rgba(75, 126, 139, 0.1);
    margin: auto;
    z-index: 44;
    position: relative;
    opacity: 1;
    border-radius: 5px 5px 5px 5px;

    .text_content {
      padding: 20px 15px;

      .education {
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #336c74;
        line-height: 17px;
      }

      .first {
        display: flex;

        .left {
          width: 44px;
          height: 44px;
        }

        .right {
          flex: 1;
          padding-left: 15px;

          .right_first_line {
            display: flex;
            width: 100%;
            justify-content: space-between;

            .name {
              height: 24px;
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 550;
              color: #003941;
              line-height: 24px;
            }

            .education {
              line-height: 24px;
            }
          }

          .right_two_line {
            display: flex;
            width: 100%;
            justify-content: space-between;
          }
        }
      }

      .test_number {
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-top: 20px;
        margin-bottom: 15px;
      }
    }
  }
}
</style>
